import { useState } from 'react';
import Button from 'src/component/Button';
import DatetimePicker from 'src/component/DatetimePicker';
import Modal from 'src/component/Modal';
import style from './QueryModal.module.scss';

type Props = {
  open: boolean;
  onClose: () => void;
  defaultBegin: string;
  defaultEnd: string;
  onSubmit: (from: string, to: string) => void;
};

const QueryModal = ({ open, onClose, defaultBegin, defaultEnd, onSubmit }: Props) => {
  const [begin, setBegin] = useState<string>(defaultBegin);
  const [end, setEnd] = useState<string>(defaultEnd);

  return (
    <Modal open={open} handleClose={onClose}>
      <>
        <div className={style.heading}>查询区间</div>
        <div className={style.sub}>从</div>
        <DatetimePicker
          value={begin}
          onChange={(e) => {
            if (!e) return;
            if (new Date(e) > new Date(end)) setEnd(e);
            setBegin(e);
          }}
        />
        <div className={style.sub}>到</div>
        <DatetimePicker
          value={end}
          onChange={(e) => {
            if (!e) return;
            if (new Date(e) < new Date(end)) setBegin(e);
            setEnd(e);
          }}
        />
        <div className={style.btn}>
          <Button appearance="outlined" onClick={onClose}>
            取消
          </Button>
          <Button
            onClick={() => {
              onClose();
              onSubmit(begin, end);
            }}
          >
            送出
          </Button>
        </div>
      </>
    </Modal>
  );
};

export default QueryModal;
